<template>
  <div id="modelSetting">
    <el-row :gutter="10">
      <el-col :span="8">
        <ModelDetail :model="model"/>
      </el-col>
      <el-col :span="16">
        <el-tag type="info">Bug fixed</el-tag>
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6}"
            placeholder="Bug fixed"
            label="Bug fixed"
            v-model="bugFixed"
            @blur="updateBugFixed()">
        </el-input>
        <div style="margin: 10px 0;"></div>

        <el-tag type="success">New feature</el-tag>
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6}"
            placeholder="New feature"
            label="New feature"
            v-model="newFeature"
            @blur="updateNewFeature()">
        </el-input>
        <div style="margin: 10px 0;"></div>

        <el-tag type="warning">Changed</el-tag>
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6}"
            placeholder="Changed"
            label="Changed"
            v-model="changed"
            @blur="updateChanged()">
        </el-input>
        <div style="margin: 10px 0;"></div>

        <el-tag>Note</el-tag>
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6}"
            placeholder="Note"
            label="Note"
            v-model="note"
            @blur="updateNote()">
        </el-input>
        <div style="margin: 10px 0;"></div>

        <el-tag>Known issue</el-tag>
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6}"
            placeholder="Known issue"
            label="Known issue"
            v-model="knownIssue"
            @blur="updateKnownIssue()">
        </el-input>
        <div style="margin: 10px 0;"></div>

      </el-col>
    </el-row>

  </div>
</template>

<script>

import ModelDetail from "@/components/modelDetail"

export default {
  name: "ModelSetting",
  props: ['model'],
  components: {
    ModelDetail,
  },
  data: function () {
    return {
      bugFixed: this.$store.state.model.modelSettingList[this.model]['release_info']['bug_fixed'],
      newFeature: this.$store.state.model.modelSettingList[this.model]['release_info']['new_feature'],
      changed: this.$store.state.model.modelSettingList[this.model]['release_info']['changed'],
      note: this.$store.state.model.modelSettingList[this.model]['release_info']['note'],
      knownIssue: this.$store.state.model.modelSettingList[this.model]['release_info']['known_issue'],
    }
  },
  methods: {
    updateBugFixed() {
      this.$store.commit(
          'updateBugFixed',
          {
            model: this.model,
            bugFixed: this.bugFixed
          }
      )
    },
    updateNewFeature() {
      this.$store.commit(
          'updateNewFeature',
          {
            model: this.model,
            newFeature: this.newFeature
          }
      )
    },
    updateChanged() {
      this.$store.commit(
          'updateChanged',
          {
            model: this.model,
            changed: this.changed
          }
      )
    },
    updateNote() {
      this.$store.commit(
          'updateNote',
          {
            model: this.model,
            note: this.note
          }
      )
    },
    updateKnownIssue() {
      this.$store.commit(
          'updateKnownIssue',
          {
            model: this.model,
            knownIssue: this.knownIssue
          }
      )
    },
  },
}
</script>

<style scoped>
#setting {
  border: 1px var(--c4) dotted;
}

.hw-btn {
  margin-left: 80%;
}
</style>